<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预订机票 - 航空订票系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <style>
        .booking-header {
            background: linear-gradient(135deg, #1a237e, #3949ab);
            color: white;
            padding: 2rem 0;
            margin-bottom: 2rem;
            border-radius: 0 0 20px 20px;
            position: relative;
            overflow: hidden;
        }
        
        .booking-header::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
        }
        
        .booking-header::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 50%;
        }
        
        .booking-title {
            font-weight: 700;
            font-size: 2.2rem;
            margin-bottom: 0.5rem;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb {
            background-color: transparent;
            padding: 0;
            margin-bottom: 0;
            position: relative;
            z-index: 1;
        }
        
        .breadcrumb-item + .breadcrumb-item::before {
            content: "›";
            color: rgba(255, 255, 255, 0.7);
        }
        
        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.9);
        }
        
        .breadcrumb-item a {
            color: white;
        }
        
        .flight-info-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .flight-info-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }
        
        .flight-route {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1.5rem 1rem;
            margin: 1rem 0;
        }
        
        .flight-route::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 15%;
            right: 15%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #3949ab, transparent);
            z-index: 0;
        }
        
        .flight-city {
            text-align: center;
            background-color: white;
            padding: 0.5rem;
            position: relative;
            z-index: 1;
        }
        
        .flight-city-code {
            font-size: 0.8rem;
            color: #6c757d;
        }
        
        .plane-icon {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            color: #3949ab;
            background-color: white;
            padding: 0.5rem;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            z-index: 1;
        }
        
        .booking-form-card {
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .form-group label {
            font-weight: 500;
            color: #495057;
        }
        
        .form-check-label {
            font-weight: normal;
        }
        
        .price-card {
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .price-row {
            padding: 0.75rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .price-row:last-child {
            border-bottom: none;
        }
        
        .total-price {
            font-size: 1.5rem;
            font-weight: 700;
            color: #e53935;
        }
        
        .passenger-switch {
            display: flex;
            background-color: #f8f9fa;
            border-radius: 10px;
            padding: 0.5rem;
            margin-bottom: 1.5rem;
        }
        
        .passenger-switch-btn {
            flex: 1;
            text-align: center;
            padding: 0.75rem 1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .passenger-switch-btn.active {
            background-color: #3949ab;
            color: white;
            box-shadow: 0 3px 10px rgba(57, 73, 171, 0.3);
        }
        
        .passenger-switch-btn:not(.active):hover {
            background-color: rgba(57, 73, 171, 0.1);
        }
        
        .passenger-switch-btn i {
            margin-right: 0.5rem;
        }
        
        @media (max-width: 767.98px) {
            .booking-title {
                font-size: 1.8rem;
            }
            
            .flight-route {
                padding: 1rem 0;
            }
            
            .flight-route::before {
                left: 25%;
                right: 25%;
            }
            
            .plane-icon {
                font-size: 1.2rem;
                padding: 0.4rem;
            }
            
            .passenger-switch {
                flex-direction: column;
            }
            
            .passenger-switch-btn {
                margin-bottom: 0.5rem;
            }
            
            .passenger-switch-btn:last-child {
                margin-bottom: 0;
            }
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="/flightbooking/"><i class="fas fa-plane mr-2"></i>航空订票系统</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/"><i class="fas fa-home mr-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/flights"><i class="fas fa-plane-departure mr-1"></i> 航班管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/passengers"><i class="fas fa-users mr-1"></i> 旅客管理</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="/flightbooking/tickets"><i class="fas fa-ticket-alt mr-1"></i> 票务管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/flightbooking/dashboard"><i class="fas fa-chart-line mr-1"></i> 统计面板</a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-lg-0 d-none d-lg-flex">
                    <div class="input-group">
                        <input class="form-control" type="search" placeholder="快速搜索" aria-label="Search">
                        <div class="input-group-append">
                            <button class="btn btn-light" type="submit"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    
    <div class="booking-header">
        <div class="container">
            <h1 class="booking-title animate__animated animate__fadeInUp">机票预订</h1>
            <nav aria-label="breadcrumb" class="animate__animated animate__fadeInUp animate__delay-1s">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/flightbooking/"><i class="fas fa-home"></i> 首页</a></li>
                    <li class="breadcrumb-item"><a href="/flightbooking/flights"><i class="fas fa-plane-departure"></i> 航班管理</a></li>
                    <li class="breadcrumb-item active" aria-current="page">预订机票</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="container mt-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/flightbooking/">首页</a></li>
                <li class="breadcrumb-item"><a href="/flightbooking/flights">航班管理</a></li>
                <li class="breadcrumb-item active" aria-current="page">预订机票</li>
            </ol>
        </nav>

        <div class="alert alert-danger alert-message animate__animated animate__fadeInUp" th:if="${flight == null}">
            <h4 class="alert-heading"><i class="fas fa-exclamation-circle mr-2"></i>未找到航班信息</h4>
            <p>抱歉，未能找到您选择的航班信息。该航班可能已被取消或不存在。</p>
            <hr>
            <p class="mb-0">
                <a href="/flightbooking/flights" class="btn btn-primary"><i class="fas fa-arrow-left mr-2"></i>返回航班列表</a>
            </p>
        </div>

        <div class="row" th:if="${flight != null}">
            <div class="col-md-4">
                <div class="card flight-info-card mb-4 animate__animated animate__fadeInLeft">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-info-circle mr-2"></i>航班信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="text-center mb-3">
                            <h5 class="text-primary mb-1" th:text="${flight.flightId}">CA1234</h5>
                            <p class="text-muted mb-0" th:text="${flight.airlineCompany}">中国国际航空</p>
                        </div>
                        
                        <div class="flight-route">
                            <div class="flight-city">
                                <div class="h5 mb-0" th:text="${flight.departureCity}">北京</div>
                                <div class="flight-city-code" th:text="${#dates.format(flight.departureTime, 'HH:mm')}">08:00</div>
                            </div>
                            <i class="fas fa-plane plane-icon"></i>
                            <div class="flight-city">
                                <div class="h5 mb-0" th:text="${flight.arrivalCity}">上海</div>
                                <div class="flight-city-code" th:text="${#dates.format(flight.arrivalTime, 'HH:mm')}">10:30</div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="row">
                            <div class="col-6">
                                <p class="mb-2"><strong><i class="far fa-calendar-alt mr-1"></i> 日期：</strong></p>
                            </div>
                            <div class="col-6 text-right">
                                <p class="mb-2" th:text="${#dates.format(flight.departureTime, 'yyyy年MM月dd日')}">2023年07月01日</p>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-6">
                                <p class="mb-2"><strong><i class="fas fa-clock mr-1"></i> 起飞：</strong></p>
                            </div>
                            <div class="col-6 text-right">
                                <p class="mb-2" th:text="${#dates.format(flight.departureTime, 'HH:mm')}">08:00</p>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-6">
                                <p class="mb-2"><strong><i class="fas fa-clock mr-1"></i> 到达：</strong></p>
                            </div>
                            <div class="col-6 text-right">
                                <p class="mb-2" th:text="${#dates.format(flight.arrivalTime, 'HH:mm')}">10:30</p>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-6">
                                <p class="mb-2"><strong><i class="fas fa-money-bill-wave mr-1"></i> 票价：</strong></p>
                            </div>
                            <div class="col-6 text-right">
                                <p class="mb-2 h5 text-primary" th:text="${'¥' + flight.basePrice}">¥1200.00</p>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-6">
                                <p class="mb-2"><strong><i class="fas fa-chair mr-1"></i> 剩余座位：</strong></p>
                            </div>
                            <div class="col-6 text-right">
                                <p class="mb-0">
                                    <span th:if="${flight.remainingSeats > 20}" class="badge badge-success" th:text="${flight.remainingSeats}">150</span>
                                    <span th:if="${flight.remainingSeats <= 20 && flight.remainingSeats > 0}" class="badge badge-warning" th:text="${flight.remainingSeats}">15</span>
                                    <span th:if="${flight.remainingSeats <= 0}" class="badge badge-danger">已满</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <div class="card booking-form-card animate__animated animate__fadeInRight">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="fas fa-ticket-alt mr-2"></i>填写订票信息</h5>
                    </div>
                    <div class="card-body">
                        <form action="/flightbooking/tickets/book" method="post" id="bookingForm" th:if="${flight.remainingSeats > 0}">
                            <input type="hidden" name="flightId" th:value="${flight.flightId}">
                            
                            <div class="passenger-switch mb-4">
                                <div class="passenger-switch-btn active" data-target="existingPassenger">
                                    <i class="fas fa-user-check"></i>选择已有旅客
                                </div>
                                <div class="passenger-switch-btn" data-target="newPassenger">
                                    <i class="fas fa-user-plus"></i>添加新旅客
                                </div>
                            </div>
                            
                            <div class="passenger-option-radio d-none">
                                <input type="radio" name="passengerOption" id="existingPassenger" value="existing" checked>
                                <input type="radio" name="passengerOption" id="newPassenger" value="new">
                            </div>
                            
                            <div id="existingPassengerForm" class="animate__animated animate__fadeIn">
                                <div class="form-group">
                                    <label for="passengerId"><i class="fas fa-user mr-1"></i>选择旅客 <span class="text-danger">*</span></label>
                                    <select class="form-control" id="passengerId" name="passengerId">
                                        <option value="">-- 请选择旅客 --</option>
                                        <option th:each="passenger : ${passengers}" 
                                                th:value="${passenger.passengerId}" 
                                                th:text="${passenger.name + ' (' + passenger.idCard + ')'}">
                                            张三 (110101199001011234)
                                        </option>
                                    </select>
                                    <small class="form-text text-muted">选择已有旅客信息</small>
                                </div>
                            </div>
                            
                            <div id="newPassengerForm" class="animate__animated animate__fadeIn" style="display: none;">
                                <div class="form-group">
                                    <label for="name"><i class="fas fa-user mr-1"></i>姓名 <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                                        </div>
                                        <input type="text" class="form-control" id="name" name="name" placeholder="请输入姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="idCard"><i class="fas fa-id-card mr-1"></i>身份证号 <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-id-card"></i></span>
                                        </div>
                                        <input type="text" class="form-control" id="idCard" name="idCard" 
                                               pattern="[0-9Xx]{18}" title="请输入18位有效身份证号" placeholder="请输入18位身份证号">
                                    </div>
                                    <small class="form-text text-muted">请输入18位有效身份证号</small>
                                </div>
                                <div class="form-group">
                                    <label for="phone"><i class="fas fa-phone mr-1"></i>联系电话 <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                        </div>
                                        <input type="tel" class="form-control" id="phone" name="phone" 
                                               pattern="[0-9]{11}" title="请输入11位手机号码" placeholder="请输入11位手机号码">
                                    </div>
                                    <small class="form-text text-muted">请输入11位手机号码</small>
                                </div>
                                <div class="form-group">
                                    <label for="email"><i class="fas fa-envelope mr-1"></i>电子邮箱</label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                        </div>
                                        <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱地址">
                                    </div>
                                </div>
                            </div>
                            
                            <hr>
                            
                            <div class="form-group">
                                <label for="seatNumber"><i class="fas fa-chair mr-1"></i>座位号 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-chair"></i></span>
                                    </div>
                                    <input type="text" class="form-control" id="seatNumber" name="seatNumber" required placeholder="请输入座位号，如12A">
                                </div>
                                <small class="form-text text-muted">例如：12A、23B</small>
                            </div>
                            
                            <div class="card price-card my-4">
                                <div class="card-header bg-info text-white">
                                    <h5 class="mb-0"><i class="fas fa-money-check-alt mr-2"></i>价格详情</h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="price-row px-3 py-3">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <p class="mb-0"><strong><i class="fas fa-tag mr-1"></i>原始票价：</strong></p>
                                            </div>
                                            <div class="col-6 text-right">
                                                <p class="mb-0 h5" th:text="${'¥' + flight.basePrice}">¥1200.00</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="price-row px-3 py-3" id="discountRow" style="display: none;">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <p class="mb-0"><strong><i class="fas fa-percentage mr-1"></i>VIP折扣：</strong></p>
                                            </div>
                                            <div class="col-6 text-right">
                                                <p class="mb-0 h5 text-success"><span id="discountRate">1.00</span>折</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="price-row px-3 py-3 bg-light">
                                        <div class="row align-items-center">
                                            <div class="col-6">
                                                <p class="mb-0"><strong><i class="fas fa-money-bill-wave mr-1"></i>最终价格：</strong></p>
                                            </div>
                                            <div class="col-6 text-right">
                                                <p class="mb-0 total-price" id="finalPrice" th:text="${'¥' + flight.basePrice}">¥1200.00</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="d-flex justify-content-end mt-4">
                                <a href="/flightbooking/flights" class="btn btn-secondary mr-2">
                                    <i class="fas fa-times mr-1"></i> 取消
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-check mr-1"></i> 确认预订
                                </button>
                            </div>
                        </form>
                        
                        <div class="alert alert-warning alert-message animate__animated animate__fadeIn" th:if="${flight.remainingSeats <= 0}">
                            <h4 class="alert-heading"><i class="fas fa-exclamation-triangle mr-2"></i>该航班已满座</h4>
                            <p>抱歉，该航班已无座位可供预订。请选择其他航班。</p>
                            <hr>
                            <p class="mb-0">
                                <a href="/flightbooking/flights" class="btn btn-primary">
                                    <i class="fas fa-arrow-left mr-1"></i> 返回航班列表
                                </a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-light mt-5 py-4">
        <div class="container">
            <div class="row">
                <div class="col-md-4 text-center text-md-left mb-3 mb-md-0">
                    <h5><i class="fas fa-plane mr-2"></i>航空订票系统</h5>
                    <p class="mb-0">提供便捷、高效的航班预订服务</p>
                </div>
                <div class="col-md-4 text-center mb-3 mb-md-0">
                    <h5>快速链接</h5>
                    <ul class="list-unstyled">
                        <li><a href="/flightbooking/flights" class="text-light"><i class="fas fa-angle-right mr-2"></i>航班查询</a></li>
                        <li><a href="/flightbooking/passengers" class="text-light"><i class="fas fa-angle-right mr-2"></i>旅客管理</a></li>
                        <li><a href="/flightbooking/tickets" class="text-light"><i class="fas fa-angle-right mr-2"></i>机票预订</a></li>
                    </ul>
                </div>
                <div class="col-md-4 text-center text-md-right">
                    <h5>联系我们</h5>
                    <p class="mb-0">客服热线: 400-123-4567</p>
                    <div class="mt-3">
                        <a href="#" class="text-light mr-3"><i class="fab fa-weixin fa-lg"></i></a>
                        <a href="#" class="text-light mr-3"><i class="fab fa-weibo fa-lg"></i></a>
                        <a href="#" class="text-light"><i class="fas fa-envelope fa-lg"></i></a>
                    </div>
                    <p class="mt-3 mb-0">© 2023 航空订票系统 - JZA04</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="/static/js/main.js"></script>
    <script>
        $(document).ready(function() {
            // 切换旅客选择表单 - 使用新的UI切换方式
            $('.passenger-switch-btn').click(function() {
                const target = $(this).data('target');
                
                // 更新按钮状态
                $('.passenger-switch-btn').removeClass('active');
                $(this).addClass('active');
                
                // 更新表单显示
                if (target === 'existingPassenger') {
                    $('#existingPassengerForm').fadeIn(300);
                    $('#newPassengerForm').hide();
                    $('#existingPassenger').prop('checked', true);
                } else {
                    $('#existingPassengerForm').hide();
                    $('#newPassengerForm').fadeIn(300);
                    $('#newPassenger').prop('checked', true);
                }
            });
            
            // 选择旅客后显示VIP折扣
            $('#passengerId').change(function() {
                const selectedOption = $(this).find('option:selected');
                if (selectedOption.val()) {
                    // 模拟从后端获取选中乘客的折扣率
                    // 在实际应用中，这里应该是从后端获取真实数据
                    const passengerDiscount = (Math.random() * 0.3 + 0.7).toFixed(2); // 生成0.7到1.0之间的随机折扣
                    
                    // 显示折扣信息并应用动画
                    $('#discountRow').slideDown(300);
                    $('#discountRate').text(passengerDiscount);
                    
                    // 计算折扣后价格
                    const basePrice = parseFloat($('#finalPrice').text().replace('¥', ''));
                    const discountedPrice = (basePrice * passengerDiscount).toFixed(2);
                    
                    // 应用价格变化动画
                    animatePrice('#finalPrice', basePrice, discountedPrice);
                } else {
                    // 隐藏折扣行
                    $('#discountRow').slideUp(300);
                    
                    // 恢复原价
                    const basePrice = parseFloat("[[${flight.basePrice}]]");
                    const currentPrice = parseFloat($('#finalPrice').text().replace('¥', ''));
                    
                    // 应用价格变化动画
                    animatePrice('#finalPrice', currentPrice, basePrice);
                }
            });
            
            // 表单验证
            $('#bookingForm').submit(function(e) {
                let isValid = true;
                
                // 重置所有验证状态
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();
                
                // 验证旅客信息
                if ($('#existingPassenger').prop('checked')) {
                    if (!$('#passengerId').val()) {
                        isValid = false;
                        showValidationError($('#passengerId'), '请选择旅客');
                    }
                } else {
                    // 验证姓名
                    if (!$('#name').val().trim()) {
                        isValid = false;
                        showValidationError($('#name'), '请输入旅客姓名');
                    }
                    
                    // 验证身份证号
                    const idCard = $('#idCard').val().trim();
                    if (!idCard) {
                        isValid = false;
                        showValidationError($('#idCard'), '请输入身份证号');
                    } else if (!/^[0-9Xx]{18}$/.test(idCard)) {
                        isValid = false;
                        showValidationError($('#idCard'), '请输入有效的18位身份证号');
                    }
                    
                    // 验证手机号
                    const phone = $('#phone').val().trim();
                    if (!phone) {
                        isValid = false;
                        showValidationError($('#phone'), '请输入联系电话');
                    } else if (!/^[0-9]{11}$/.test(phone)) {
                        isValid = false;
                        showValidationError($('#phone'), '请输入有效的11位手机号码');
                    }
                }
                
                // 验证座位号
                if (!$('#seatNumber').val().trim()) {
                    isValid = false;
                    showValidationError($('#seatNumber'), '请输入座位号');
                }
                
                if (!isValid) {
                    e.preventDefault();
                    
                    // 滚动到第一个错误处
                    const firstError = $('.is-invalid:first');
                    if (firstError.length) {
                        $('html, body').animate({
                            scrollTop: firstError.offset().top - 100
                        }, 500);
                    }
                    
                    return false;
                }
                
                // 如果验证通过，显示提交按钮加载状态
                if (isValid) {
                    const submitBtn = $(this).find('button[type="submit"]');
                    submitBtn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 处理中...');
                    submitBtn.prop('disabled', true);
                }
                
                return true;
            });
            
            // 显示表单验证错误
            function showValidationError(input, message) {
                input.addClass('is-invalid');
                
                // 创建错误提示
                const feedback = $('<div class="invalid-feedback"></div>').text(message);
                
                // 如果是在input-group中
                if (input.parent().hasClass('input-group')) {
                    input.parent().after(feedback);
                } else {
                    input.after(feedback);
                }
            }
            
            // 价格变化动画
            function animatePrice(element, from, to) {
                const $element = $(element);
                const duration = 1000; // 动画持续时间，毫秒
                const frameRate = 60; // 每秒帧数
                const totalFrames = duration / (1000 / frameRate);
                const step = (to - from) / totalFrames;
                
                let currentFrame = 0;
                let currentValue = from;
                
                // 添加闪烁效果类
                $element.addClass('text-blink');
                
                const interval = setInterval(function() {
                    currentFrame++;
                    currentValue += step;
                    
                    if (currentFrame >= totalFrames) {
                        clearInterval(interval);
                        currentValue = to;
                        $element.removeClass('text-blink');
                    }
                    
                    $element.text('¥' + currentValue.toFixed(2));
                }, 1000 / frameRate);
            }
            
            // 添加座位号输入自动格式化
            $('#seatNumber').on('input', function() {
                let value = $(this).val();
                
                // 移除非字母数字字符
                value = value.replace(/[^a-zA-Z0-9]/g, '');
                
                // 分离数字和字母部分
                const numPart = value.replace(/[a-zA-Z]/g, '');
                const letterPart = value.replace(/[0-9]/g, '').toUpperCase();
                
                // 重组座位号
                if (numPart && letterPart) {
                    $(this).val(numPart + letterPart);
                } else {
                    $(this).val(value);
                }
            });
            
            // 添加机票信息卡片悬停效果
            $('.flight-info-card').hover(function() {
                $(this).find('.plane-icon').css('transform', 'translate(-50%, -50%) rotate(25deg)');
            }, function() {
                $(this).find('.plane-icon').css('transform', 'translate(-50%, -50%) rotate(0deg)');
            });
            
            // 给价格添加闪烁动画的CSS
            $('<style>')
                .prop('type', 'text/css')
                .html(`
                    @keyframes priceBlink {
                        0% { opacity: 1; }
                        50% { opacity: 0.3; }
                        100% { opacity: 1; }
                    }
                    .text-blink {
                        animation: priceBlink 0.5s linear infinite;
                    }
                `)
                .appendTo('head');
        });
    </script>
</body>
</html> 
